<template>
    <div class="detail-action">
      <div class="state">
        <p>待支付</p>
      </div>
      <div class="info">
        <p>订单编号:1372361846887026690</p>
        <p>下单时间:2021-03-18 01:45:10</p>
      </div>
      <div class="btn">
        <button class="xtx-button primary" type="primary" size="small">立即支付</button>
        <button class="xtx-button gray" type="gray" size="small">取消订单</button>
      </div>
    </div>
</template>
<script>
export default {
  name: 'OrderDetailAction'
}
</script>
<style lang="scss" scoped>
div,p,ul,ol,li,dl,dt,dd,form,table,h1,h2,h3,h4,h5,h6,input,select,textarea,span,strong,em,b,i,u,a,img,*{padding:0;margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
body { font-family: '黑体'; font-size: 12px;  color: #000; background-color: #fff; }
ul,ol,li { list-style: none; }
h1,h2,h3,h4,h5,h6{ font-size: 14px;}
a img{ border: none;}
img,input,textarea,select,option,output,span,a,b,em,i,strong,u,s,button,label{ vertical-align:middle;}
table{border-collapse:collapse;}
a { background: transparent; text-decoration: none; color: #333; }
a:hover{  color: #f90; }
.clear{ clear:both; height: 0; width: 0; overflow: hidden;}
body,html{height: 100%;width: 100%;}
.detail-action {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: center;
  .state {
    width: 220px;
    text-align: center;
    .iconfont {
      font-size: 40px;
      color: #fff;
    }
    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
  }
  .info {
    width: 240px;
    line-height: 30px;
    p {
      color: #999;
    }
  }
  .btn {
    flex: 1;
    text-align: right;
    margin-right: 100px;
    .xtx-button {
      margin-left: 20px;
    }
  }
}
.primary{
    border-color: #27ba9b;
    background: #27ba9b;
    color: #fff;
}
.xtx-button{
    margin-left: 20px;
}
.gray {
    border-color: #ccc;
    background: #ccc;
    color: #fff;
}
</style>